@import "vapor";

nav {
    .vapor-icon {
        width: 22px;
        height: 22px;
        background-color: $grey-600;
    }
}

$navbar-light-color: $grey-600;
$navbar-light-hover-color: $blue-300;
$navbar-light-active-color: $blue-300;

#vapor-navbar {
    height: 80px;
}

#vapor-logo-footer {
    width: 197px;
    height: 76px;
}


$footer-font-size: 16px;

footer {
    font-size: $footer-font-size;

    h6 {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }

    ul {
        padding-left: 0;
    }

    li {
        list-style: none;
        margin-top: 12px;

        a {
            text-decoration: none;
        }
    }
}

#footer-copyright {
    font-size: $footer-font-size
}

#footer-social-links {
    vapor-icon {
        width: 24px;
        height: 24px;
    }

    font-size: 24px;
}

#footer-bottom {
    display: flex;
}

#framework-dropdown-menu {
    background: white;
    border-top: 1px solid $grey-200;
    border-bottom: 1px solid $grey-200;
    border-left: none;
    border-right: none;
    border-radius: 0px;
}

.nav-dropdown-container-title {
    font-size: 16px;
    color: $grey-900;
}

.nav-dropdown-container-caption {
    font-size: 14px;
    color: $grey-600;
}

.dropdown-item:active {
    background: transparent;
}

.dropdown-item:hover {
    border-radius: 16px;
    background: $grey-100;
}

#framework-dropdown-menu {
    @include media-breakpoint-down(lg) {
        margin-left: -1em;
        margin-right: -1em;
    }
}

.nav-dropdown-container {
    @include media-breakpoint-up(lg) {
        padding: 1em;
    }

    padding-top: 1em;
    padding-bottom: 1em;

    .vapor-icon {
        background-color: $blue-400;
    }
}

@include media-breakpoint-up(lg) {
    #framework-dropdown-menu {
        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
        border-radius: 24px;
        border: 1px solid $grey-200;
    }

    .nav-dropdown-container {
        padding: 1em;
    }
}

#documentation-navbar-chevron {
    width: 15px;
    height: 15px;
    margin-top: 4px;
}

@include media-breakpoint-down(lg) {
    #documentation-navbar-chevron {
        float: right;
    }
}

#documentation-navbar-chevron[data-shown="true"] {
    transform: rotate(180deg);
}

#documentation-dropdown-link:hover {
    .vapor-icon {
        background-color: $navbar-light-active-color;
    }
}

#documentation-dropdown-link:active {
    .vapor-icon {
        background-color: $navbar-light-active-color;
    }
}

#documentation-dropdown-link:focus {
    .vapor-icon {
        background-color: $navbar-light-active-color;
    }
}

/*for animation*/
#documentation-navbar-chevron {
    transition: 0.35s;
}

nav {
    #vapor-navbar-toggler-icon {
        background-color: $grey-900;
    }
}

.navbar-toggler {
    border: none;
}

@include media-breakpoint-down(lg) {
    #navbarSupportedContent {
        background: white;
        box-shadow: -20px 0px 40px rgba(0, 0, 0, 0.07);
        border-radius: 24px 0px 0px 24px;
        padding: 1em;
        z-index: 1;
    }
}
